import { reactive, ref } from 'vue';
import { getTableDataApi } from '../../api/table.js';
import { useRequest } from 'vue-hooks-plus'
export function useTableData(url) {
  const tableData = ref([]);
  const total = ref(0);
  const ajaxData = reactive({
    pageSize: 10,
    page: 1,
  });
  const { loading, run  } = useRequest(getTableDataApi,{
    manual: true,
    onSuccess:(res) => {
      tableData.value = res.data.data.records
      total.value = res.data.data.total
    },
    onError:(e) => {
      console.error(e)
    }
  })
  async function getTableData(params = {}) {
    const paramsData = {
      ...ajaxData,
      ...params,
    };
    run(url,paramsData)
  }
  // 切换页码大小
  function sizeChange(size) {
    ajaxData.pageSize = size;
    getTableData().then((r) => {});
  }
  function currentChange(page) {
    ajaxData.page = page;
    getTableData().then((r) => {});
  }
  function prevClick(prevPage) {
    ajaxData.page = prevPage;
    getTableData().then((r) => {});
  }
  function nextClick(nextPage) {
    ajaxData.page = nextPage;
    getTableData().then((r) => {});
  }
  return {
    sizeChange,
    currentChange,
    getTableData,
    tableData,
    prevClick,
    nextClick,
    total,
    loading,
  };
}
